<script setup>
import {Delete, Edit, Iphone, Money, ShoppingTrolley} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import memberApi from "@/api/memberApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
  const members = ref([])
  let pageInfo = reactive({
    page:1,
    limit:10,
    total:0,
    name:'',
    phone:''
  })
  loadMember()
  function loadMember(){
    memberApi.getAllMember(pageInfo)
        .then(resp=>{
          console.log(resp.data.list)
          members.value=resp.data.list
          pageInfo.total=resp.data.total
        })
  }
  /*改变每页大小*/
  function handleSizeChange(val){
    pageInfo.pageSize = val
    loadMember()
  }
  /*改变当前页*/
  function handleCurrentChange(val){
    pageInfo.pageNum = val
    loadMember()
  }
  /*搜索*/
  function onSearch(){
    loadMember()
  }
  /*批量删除*/
  let ids = ref([])
  function handleSelectionChange(val){
    ids.value=[]
    val.forEach(item=>{
      ids.value.push(item.id)
    })
  }
  function delSelected(){
    if (ids.value.length===0){
      ElMessage.warning("不能删除为空")
      return
    }
    ElMessageBox.confirm(
        '确定删除所选项吗',
        '警告',
        {
          confirmButtonText:'确定',
          cancelButtonText:'取消'
        }

    ).then(()=>{
      memberApi.delSelected(ids.value).then(resp=>{
        if (resp.code===200){
          ElMessage.success("批量删除成功")
          loadMember()
        }else{
          ElMessage.error(resp.msg)
        }
      })
    })
  }
  /*弹出添加框*/
  const addVisible = ref(false)
  let addMember = reactive({})
  function showMemberBox(){
    addVisible.value = true
  }
  /*检验名称是否存在*/
  function checkName(name){
    memberApi.checkName(name).then(resp=>{
      if (resp.code===403){
        ElMessage.error(resp.msg)
        addMember.name=''
      }
    })
  }
  /*检验手机号是否存在*/
  function checkPhone(phone){
    const regex = /^1[3-9]\d{9}$/;
    if (!regex.test(phone)) {
      ElMessage.error('请输入有效的手机号')
      addMember.phone=''
      return false;
    }
    memberApi.checkPhone(phone).then(resp=>{
      if (resp.code===402){
        ElMessage.error(resp.msg)
        addMember.phone=''
      }
    })
  }
  const password=ref('')
  /*检验两次密码是否相同*/
  function checkPassword(){
    if (addMember.password===null || addMember.password===''){
      ElMessage.error("密码不能为空")
      return
    }
    if (password.value===null || password.value===''){
      ElMessage.error("确认密码密码不能为空")
      return
    }
    if (addMember.password!==password.value){
      ElMessage.error("两次密码不一致")
      password.value=''
    }
  }
  /*添加会员*/
  function handleAdd(){
    if (addMember.name===null || addMember.name==='') return
    if (addMember.phone===null || addMember.phone==='') return
    if (addMember.password===null || addMember.password==='') return
    if (password.value===null || password.value==='') return
    memberApi.addMember(addMember).then(resp=>{
      if (resp.code === 200) {
        ElMessage.success("添加成功")
        addVisible.value=false
        addMember = reactive({})
        password.value=''
        loadMember()
      }else {
        ElMessage.error(resp.msg)
        loadMember()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*显示编辑窗口*/
  const editVisible = ref(false)
  const editMember = ref({})
  function showEdit(member){
    editVisible.value = true
    editMember.value = member
    editMember.value.password=''
  }
  /*编辑*/
  function handleEdit(){
    console.log(editMember.value)
    memberApi.editMember(editMember.value).then(resp=>{
      if (resp.code===200){
        ElMessage.success("编辑成功")
        editVisible.value = false
        loadMember()
      }else{
        ElMessage.error(resp.msg)
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*删除*/
  function handleRemove(member){
    ElMessageBox.confirm(
        '确定删除吗?',
        "警告",
        {
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type : 'warning'
        }
    ).then(()=>{
      memberApi.remove(member.id).then(resp=>{
        if (resp.code === 200) {
          ElMessage.success("删除成功")
          loadMember()
        }else{
          ElMessage.error(resp.msg)
          loadMember()
        }
      })
    })
  }
  /*充值*/
  let payVisible= ref(false)
  let balance = ref(0)
  let memberId = ref(0)
  function pay(member){
    payVisible.value=true
    memberId.value = member.id
  }
  function handlePay(){
    memberApi.pay(balance.value,memberId.value).then(resp=>{
      if (resp.code===200) {
        ElMessage.success("充值成功")
        payVisible.value=false
        balance.value=0
        loadMember()
      }else{
        ElMessage.error(resp.msg)
        payVisible.value=false
        balance.value=0
        loadMember()
      }
    })
  }
  /*消费*/
  let consumeVisible = ref(false)
  let consumeBalance = ref(0)
  function consume(member){
    consumeVisible.value = true
    memberId.value = member.id
  }
  function handleConsume(){
    memberApi.consume(consumeBalance.value,memberId.value).then(resp=>{
      if (resp.code===200) {
        ElMessage.success("消费成功")
        consumeVisible.value=false
        consumeBalance.value=0
        loadMember()
      }else{
        ElMessage.error(resp.msg)
        consumeVisible.value=false
        consumeBalance.value=0
        loadMember()
      }
    })
  }

</script>
<template>
  <!-- 根据姓名和手机号搜索 -->
  <div class="flex gap-4 mb-4">
  &nbsp;&nbsp;
  <span>手机号</span>
  <el-input
      v-model="pageInfo.phone"
      style="width: 240px"
      placeholder="请输入手机号"
      :suffix-icon="Iphone"
  />
  &nbsp;&nbsp;
  <span>姓名</span>
  <el-input
      v-model="pageInfo.name"
      style="width: 240px"
      placeholder="请输入姓名"
  />
  &nbsp;&nbsp;
  <el-button type="primary" @click="onSearch"><el-icon><Search /></el-icon></el-button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <!-- 添加教练按钮 -->
  <el-button type="success" @click="showMemberBox">创建会员</el-button>
  </div>

  <!-- 批量删除 -->
  <div>
  <el-button type="danger" @click="delSelected">删除所选项</el-button>
  </div>

  <!--会员列表-->
  <div>
    <el-table
        :data="members"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        style="width: 100%"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="id" label="ID" sortable width="100" />
      <el-table-column prop="phone" label="手机号" width="180" />
      <el-table-column prop="name" label="姓名" width="90" />
      <el-table-column prop="createTime" sortable label="创建时间" />
      <el-table-column prop="balance" sortable label="余额" />
      <el-table-column label="操作" width="350" >
        <template #default="scope">
          <el-button size="small" type="primary"
                     @click="pay(scope.row)"><el-icon><edit/></el-icon>&nbsp;充值</el-button>
          <el-button size="small" type="info"
                     @click="consume(scope.row)"><el-icon><delete/></el-icon>&nbsp;消费</el-button><el-button size="small" type="success"
                     @click="showEdit(scope.row)"><el-icon><edit/></el-icon>&nbsp;编辑</el-button>
          <el-button size="small" type="danger"
                     @click="handleRemove(scope.row)"><el-icon><delete/></el-icon>&nbsp;删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--分页-->
  <div class="demo-pagination-block">
  <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :size='"default"'
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</div>

  <!-- 添加的弹窗 -->
  <el-dialog v-model="addVisible" title="创建新会员" width="500" :destroy-on-close="true">
    <el-form :model="addMember">
      <el-form-item label="名字" :label-width="60">
        <el-input v-model="addMember.name" placeholder="请输入会员名字" @blur="checkName(addMember.name)"/>
      </el-form-item>
      <el-form-item label="电话" :label-width="60">
        <el-input v-model="addMember.phone" placeholder="请输入会员电话" @blur="checkPhone(addMember.phone)"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="60">
        <el-input v-model="addMember.password" show-password placeholder="请输入会员密码"/>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="60">
        <el-input v-model="password" show-password placeholder="请输入确认密码" @blur="checkPassword"/>
      </el-form-item>
      <el-form-item label="充值" :label-width="60">
        <el-input type="number" v-model="addMember.balance" placeholder="请输入充值金额"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">
          创建
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑的弹窗 -->
  <el-dialog v-model="editVisible" title="编辑会员" width="500">
    <el-form :model="editMember">
      <el-form-item label="名字" :label-width="60">
        <el-input v-model="editMember.name" placeholder="请输入会员名字"/>
      </el-form-item>
      <el-form-item label="电话" :label-width="60">
        <el-input v-model="editMember.phone" placeholder="请输入会员电话"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="60">
        <el-input v-model="editMember.password" show-password placeholder="请输入会员密码"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
<!-- 充值 -->
  <el-dialog v-model="payVisible" title="充值" width="500">
    <el-form :model="balance">
      <el-form-item label="金额" :label-width="60">
        <el-input v-model="balance" type="number" placeholder="请输入金额"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="payVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePay">
          充值
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 消费 -->
  <el-dialog v-model="consumeVisible" title="充值" width="500">
    <el-form>
      <el-form-item label="金额" :label-width="60">
        <el-input v-model="consumeBalance" type="number" placeholder="请输入金额"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="consumeVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConsume">
          消费
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
  div{
    margin: 10px 6px;
  }
</style>